<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="y" uri="http://yy.com/common/" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>视频管理</title>
     <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/confirm.js"></script>
	<script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/message_cn.js"></script>
	<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    
    <script type="text/javascript">
    	
    	function showAddVideo(){
    	location.href="addVideo.action";
    	}
    
    	function showDeleteConfirm(obj,id,name){
        
            Confirm.show('温馨提示', '确定删除'+name+'？', {
                'Delete': {
                    'primary': true,
                    'callback': function() {
                       //alert("++++++");
                         var params={"id":id};
                        $.post("deleteVideo.action",params,function(data){
                            if(data=='success'){
                              $(obj).parent().parent().remove();
                              Confirm.show('处理结果', '成功删除');
                            }else{
                                Confirm.show('处理结果', '删除失败');
                            }
                        }); 
                    }
                }
            });
      }
      
      // 老师和课程下拉列表
      function showName(obj,id,flag){
      	var name = $(obj).text();
      	
      	if(flag==1){
      		$("#speakerName").html(name+"<span class='caret'></span>");
      		$("#speakerId").val(id);
      		
      	}else{
      		$("#courseName").html(name+"<span class='caret'></span>");
      		$("#courseId").val(id);
      	}
      }
      
      
      
      // *******批量删除*********
      var deleteNum = 0;
      function choiseAll(obj){
      		var value = obj.checked;
      		var arr = document.getElementsByName("ids");
      		
      		for(var i = 0;i<arr.length;i++){
      			arr[i].checked=value;
      		}
      		if(value){
      			deleteNum = arr.length;
      		}else{
      			deleteNum = 0;
      		}
      		$("#delNum").text(deleteNum);
      }
      
      function choiseOne(obj){
      	if(obj.checked){
      		deleteNum+=1;
      	}else{
      		deleteNum-=1;
      		document.getElementById("checkAllId").checked=false;
      	}
      	
      	var arr=document.getElementsByName("ids");
          if(deleteNum==arr.length){
             document.getElementById("checkAllId").checked=true;
          }
          
          $("#delNum").text(deleteNum);
      }
      
      $(function(){
      	$("#btn").click(function(){
      		if(deleteNum>0){
      			Confirm.show('SB','确定删除'+deleteNum+'条数据？',{
      				'Delete':{
      					'primary':true,
      					'callback':function(){
      						$("#deleteForm").submit();
      					}
      				}
      			});
      		}
      	
      	});
      
      })
    
    </script>
  </head>
  <body>
    
    <nav class="navbar navbar-inverse" style="margin-bottom:0px;">
     <div class="container">
     
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          
          <a class="navbar-brand" href="videoList.action">视频管理项目</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
            <li class="active"><a href="videoList.action">视频管理</a></li>
            <li ><a href="speakerList.action">主讲人管理</a></li>
            <li><a href="courseList.action">课程管理</a></li>
          </ul>
          
          <p class="navbar-text navbar-right"><span>${sessionScope.userName }</span><i class="glyphicon glyphicon-log-in"></i>
            <a href="${pageContext.request.contextPath}/admin/exit.action" class="navbar-link">退出</a>
          </p>
        </div><!-- /.navbar-collapse -->
       </div>
      </div><!-- /.container-fluid -->
    </nav>
    <div class="jumbotron" style="margin-top:0px;padding-top:7px;padding-bottom:7px;">
	    <div class="container" >
	       <h2>视频管理</h2>
	    </div>
		</div>
	
	     
	    <div class="container">

		<div class="row">
			<div class="col-md-3">
				<button  type="button" onclick="showAddVideo()"
					class="btn btn-info dropdown-toggle" data-toggle="dropdown"
					aria-haspopup="true" aria-expanded="false">添加</button>

				<button id="btn" class="btn btn-primary" type="button">
					批量删除 <span class="badge" id="delNum">0</span>
				</button>
			</div>
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<!-- 查询相关组件 -->
				<form class="navbar-form navbar-right" action="videoList.action" >
					<input type="text" name="title" class="form-control" placeholder="标题">
					<div class="btn-group">
						<button type="button" id="speakerName"
							class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
							aria-haspopup="true" aria-expanded="false">
							--请选择老师--<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" style="text-align: center;">
							  <c:forEach items="${speakerList}" var="speaker" >
								<li value='${speaker.id}'><a href="javascript:void(0);"
									onclick="showName(this,${speaker.id},1)">${speaker.speakerName}</a></li>
							  </c:forEach>
						</ul>
						<input type="hidden" name="spearkerId" id="speakerId" value="0" />
					</div>
					<div class="btn-group">
						<button type="button" id="courseName"
							class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
							aria-haspopup="true" aria-expanded="false">
							--请选择课程--<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<c:forEach items="${courseList}" var="course" >
								<li value="${course.id}"><a href="javascript:void(0);"
									onclick="showName(this,${course.id},2)">${course.courseTitle}</a></li>
							</c:forEach>
						</ul>
						<input type="hidden" name="courseId" id="courseId" value="0" />
					</div>
					<button type="submit" class="btn btn-info dropdown-toggle">查询</button>
				</form>

			</div>

		</div>
	</div>
	
	   	<div class="container">
	   	<form id="deleteForm" action="batchDelete.action" method="post">
		  <table class="table table-bordered table-hover" style="text-align: center;">
      <thead>
        <tr class="active">
        	<th style="text-align: center; width:3%">
  				<input type="checkbox" id="checkAllId" onclick="choiseAll(this)" >
        	</th>
            <th style="text-align: center; width:5%">序号</th>
            <th style="text-align: center; width:15%">名称</th>
            <th style="text-align: center;width:40%">介绍</th>
            <th style="text-align: center; width:7%">讲师</th>
            <th style="text-align: center; width:10%">时长</th>
            <th style="text-align: center; width:7%">播放次数</th>
            <th style="text-align: center;">编辑</th>
            <th style="text-align: center;">删除</th>
        </tr>
      </thead>
      <tbody>
      <c:forEach items="${page.rows }" var="video" varStatus="i">
	       <tr>
	        	<td>
	  				<input type="checkbox" name="ids"
	  				 onclick="choiseOne(this)" value="${video.id }">
	        	</td>
	          <td scope="row">${i.count }</td>
	          <td>${video.title }</td>
	          <td style="overflow:hidden">${video.detail }</td>
	          <td>${video.speakerName }</td>
	          <td>${video.showTime }</td>
	          <td>${video.playNum }</td>
	          <td><a href="editVideo.action?id=${video.id }"><span class="glyphicon glyphicon-edit"></span></a></td>
			      <td><a href="javascript:void(0);" onclick="showDeleteConfirm(this,'${video.id}','${video.title}')">
			      <span class="glyphicon glyphicon-trash"></span></a></td>
	        </tr>
      
      </c:forEach>
      </tbody>
    </table>		
			<!-- 分页 -->		
	    <div class="col-md-12 text-right">
			<y:page url="videoList.action"></y:page>
		</div>
	     
	 </form>    
	</div>
  </body>
</html>